<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 新 增 站 点</el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search fr">
            <div>
              <el-input  v-model="selectForm.name"   size="medium"  placeholder="站点名称"></el-input>
            </div>
            <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="handleSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
      >
      <template slot-scope="{row}">
        <el-button size="mini" type="success" @click="edit(row)">编辑/查看</el-button>
        <el-button size="mini" type="danger" @click="cancelOrder(row)">删除</el-button>
      </template>

      </app-table>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px">
      <team-add v-if="dialogVisible" @cancle="dialogVisible = false"  @handleMap="handleMap" :data="ruleForm" @load="handleSearch"></team-add>
    </el-dialog>

    <!-- 地图 -->
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import appMap from "@/components/AppMap/golde";
  import teamAdd from './components/team-add';
  import { teamList, teamDelete } from "@/api/wangge";
  export default {
    name: "wanggeIndex",
    components: {
      appTable,
      appMap,
      teamAdd
    },
    data() {
      return {
        title: '添加站点',
        dialogVisible: false,
        ruleForm: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        tableColumns: [
          // { prop: "sex", label: "性别", formatter: this.genderFormatter },
          {
            prop: 'area',
            label: '网格名称'
          },
          {
            prop: 'name',
            label: '网格化站点'
          },
          {
            prop: 'leader',
            label: '街道网格负责人'
          },
          {
            prop: 'admin_num',
            label: '员工人数'
          },
          {
            prop: 'older_num',
            label: '老人人数'
          },
          {
            prop: 'address',
            label: '详细地址'
          },
          {
            slot: 'action'
          }
        ],
        key: Math.random(),
        departTypeList: [],
        roleList: [],
        mapVisible: false,
        key2: Math.random(),
        keyword: "",
        base: {},
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      handleMap(keyword) {
        this.key2 = Math.random();
        this.mapVisible = true;
        if (keyword) this.keyword = keyword;
      },
      closeMap() {
        this.mapVisible = false;
      },
      result(e) {
        this.mapVisible = false;
        this.$set(this.base, "lng", e.lng);
        this.$set(this.base, "lat", e.lat);
        // this.$set(this.base, "address", e.address);
        this.$set(this.ruleForm, "base", this.base);
      },
      handleSearch() {
        this.getTableData()
      },
      getTableData() {
        let data = this.selectForm;
        teamList(data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", -1);
          }
        });
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this[formName] = {};
        this.dialogVisible = false;
      },
      edit (row) {
        this.title = '编辑站点';
        this.key = Math.random();
        this.dialogVisible = true
        this.ruleForm = { ...row }
      },
      handleAdd() {
        this.title = '添加站点';
        this.dialogVisible = true;
        this.key = Math.random();
        this.ruleForm = {};
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.getTableData();
      },
      cancelOrder(rows) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              id: rows.id,
            };
            teamDelete(params).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!"});
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
</style>
